<template>
  <div class="randoms-container">
    <el-card class="box-card">
      <!-- form表单+按钮 -->
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">

              <el-form-item label="关键字">

                <el-input placeholder="根据编号搜索" v-model="keyword"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <!-- <el-col :span="12"><div class="grid-content bg-purple" ></div></el-col> -->
          <el-col :span="18" style="text-align: right">
            <div class="grid-content bg-purple">
              <el-form-item>
                <el-button @click="clearContent">清除</el-button>
                <el-button type="primary" @click="searchContent">搜索</el-button>
                <!-- <el-button type="primary" >搜索</el-button> -->
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- alert 提示 -->
      <div class="alert">
        <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable="false">
        </el-alert>
      </div>
      <!-- table 表单布局 -->
      <el-table :data="items" style="width: 100%" v-loading="isLoading">
        <el-table-column prop="id" label="编号" width="220"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80" :formatter="formatter">
        </el-table-column>

        <el-table-column prop="questionIDs" label="题目编号" width="220">
          <template #default="{ row }">
            <div v-for="item in row.questionIDs" :key="item.number">
              <a style="color: rgb(0, 153, 255)" @click="showQuestionsDialog(item.id)">{{
                item.number
              }}</a>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="addTime" label="录入时间" width="180"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="167"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="165"> </el-table-column>
        <el-table-column prop="userName" label="录入人" width="165"> </el-table-column>

        <el-table-column prop="name" label="操作" width="0">
          <template #default="{ row }">
            <!-- {{row}} -->
            <el-button class="el-icon-delete btnRadius" @click="delRandoms(row.id)"></el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页导航栏 -->
      <div>
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="counts"

          :page-sizes="[20, 30, 50, 100]"
          :page-size="form.pagesize"
          :current-page="form.page"

          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹出层 -->
    <div>
      <el-dialog
        title="题目预览"
        :visible.sync="showDialog"
        width="60%"
        @close="closeDialog"
        :close-on-click-modal="false"
      >
        <!-- 内容 -->
        <div class="rowclass">
          <div class="firsttop">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  【题型】：{{ emnuQuestions(userInfo.questionType) }}
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">【编号】：{{ userInfo.id }}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  【难度】：{{ emnuDifficulty(userInfo.difficulty) }}
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">【标签】：{{ userInfo.tags }}</div>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="20" class="colclass">
            <el-col :span="6">
              <div class="grid-content bg-purple">【学科】：{{ userInfo.subjectName }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【目录】：{{ userInfo.directoryName }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【方向】：{{ userInfo.direction }}</div>
            </el-col>
          </el-row>
          <hr />

          <!-- 题干 -->
          <el-row>
            <div>
              <el-col>
                【题干】：
                <div class="grid-content bg-purple fontcolor" v-html="userInfo.question"></div>
              </el-col>
            </div>

            <!-- 单选框 -->
            <div v-if="userInfo.questionType === '1'">
              <el-col>单选题 选项：（以下选中的选项为正确答案）</el-col>
              <el-col class="checkboxall">
                <el-radio-group size="small" v-model="radio">
                  <div v-for="item in userInfo.options" :key="item.code">
                    <el-radio :label="item.isRight" @change="handleRadioChange">{{
                      item.title
                    }}</el-radio>
                  </div>
                </el-radio-group>
              </el-col>
            </div>
            <!-- 多选框 -->
            <div v-else-if="userInfo.questionType === '2'">
              <div>
                <el-col>多选题 选项：（以下选中的选项为正确答案）</el-col>
                <el-col class="checkboxall">
                  <el-checkbox-group v-model="checkList">
                    <div v-for="item in userInfo.options" :key="item.code">
                      <el-checkbox :label="item.isRight" @change="handleCheckAllChange">{{
                        item.title
                      }}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </el-col>
              </div>
            </div>
          </el-row>
          <hr />
          <!-- 参考答案 -->
          <el-row>
            <span>【参考答案】：</span>
            <el-button type="danger" size="small" @click="showTheVideo">视频答案预览</el-button>
          </el-row>
          <div v-if="showVideo">
            <video
              :src="userInfo.videoURL || videoImg"
              autoplay="autopaly"
              width="400"
              controls="controls"
            ></video>
          </div>
          <hr />
          <el-row>
            <el-col :span="2.5"> <p>【答案解析】：</p></el-col>
            <el-col :span="21"><span v-html="userInfo.answer"></span></el-col>
          </el-row>
          <hr />
          <el-row> 【题目备注】：{{ userInfo.tags }} </el-row>
        </div>

        <!-- 按钮 -->
        <div slot="footer" class="dialog-footer footerdialog">
          <el-button @click="closeDialog" type="primary">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
// 导入枚举
import { questionType, difficulty } from '@/api/hmmm/constants.js'

export default {
  name: 'RanDoms',
  data () {
    return {
      form: {
        // 页码数
        page: 1,
        // 每页展示数
        pagesize: 20
      },
      // 搜索关键字
      keyword: '',
      // 总数
      counts: 0,
      // 渲染的数据
      items: [],
      questionTypeFn: questionType,

      difficultyFn: difficulty,
      isLoading: false,
      showDialog: false,
      userInfo: {},
      radio: 1,
      checkList: [1],

      videoImg: 'https://mo-1314261685.cos.ap-beijing.myqcloud.com/TUOER.mp4',

      showVideo: false

    }
  },
  created () {
    this.questionsRandoms()
  },
  methods: {
    /**
     * 渲染列表
     */
    async questionsRandoms () {
      this.isLoading = true
      const { data } = await randoms(this.form)
      // console.log(data)
      this.items = data.items
      this.counts = data.counts
      this.isLoading = false
    },
    /**
     * 当点击页码时
     */
    handleCurrentChange (val) {
      this.form.page = val
      this.questionsRandoms()
    },
    /**
     * 页面也容量发生变化时候
     */
    handleSizeChange (val) {
      this.form.pagesize = val

      this.form.page = 1

      this.questionsRandoms()
    },
    /**
     * 枚举,处理题型
     */
    formatter (row, column, cellValue, index) {
      const questionType = this.questionTypeFn
      const res = questionType.find(item => item.value === Number(cellValue))
      return res ? res.label : ''
    },
    /**
     * 清空表单
     */
    clearContent () {
      this.keyword = ''
      this.questionsRandoms(this.form)
    },
    /**
     * 搜索内容
     */
    async searchContent () {
      const { data } = await randoms({ keyword: this.keyword })

      // console.log(data)

      this.form.page = 1
      this.counts = data.counts
      this.items = data.items
    },
    /**
     * 删除
     */
    delRandoms (id) {
      this.$confirm('此操作将永远删除该题组，是否继续？', '提示', {
        type: 'warning'

      })
        .then(async () => {
          this.isLoading = true
          await removeRandoms({ id })
          // this.$message.success('删除成功')
          // 判断这个是否位最后一页
          if (this.items.length === 1 && this.form.page > 1) {
            this.form.page--
          }
          this.questionsRandoms()
          this.isLoading = false
        })
        .catch(() => {})
    },
    /**
     * 点击确定展示弹出层
     */
    async showQuestionsDialog (id) {
      this.showDialog = true
      const { data } = await detail({ id })
      this.userInfo = data
    },
    /**
     * 关闭弹出层
     */
    closeDialog () {
      this.showDialog = false
    },
    /**
     * 打开视频弹出层
     */
    showTheVideo () {
      this.showVideo = !this.showVideo
    },
    /**
     * 枚举 -- 题型
     */
    emnuQuestions (type) {
      const obj = this.questionTypeFn.find(item => item.value === Number(type))
      return obj ? obj.label : '未知'
    },
    /**
     * 枚举 -- 难度
     */
    emnuDifficulty (type) {
      const obj = this.difficultyFn.find(item => item.value === Number(type))
      return obj ? obj.label : '未知'
    },
    /**
     * 禁止勾选其他复选框
     */
    handleCheckAllChange (value) {
      this.checkList = [1]
    },
    /**
     * 禁止勾选其他单选框
     */
    handleRadioChange (val) {
      this.radio = 1
    }
  }
}
</script>

<style scoped lang='scss'>
.randoms-container {
  margin: 10px;
  .alert {
    margin-bottom: 10px;
  }
  .pagination {
    margin-top: 20px;
    text-align: right;
  }

  .btnRadius {

    padding: 10px 10px;
    border-radius: 50%;
    background: #fef0f0;
    border-color: #fbc4c4;
    color: #f56c6c;
  }

  .btnRadius:hover {

    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
  .rowclass {
    // margin-bottom: 10px;
    // .min {
    //   min-height: 100px;
    // }
    .firsttop {
      margin-bottom: 20px;
    }
    .fontcolor {
      color: blue;
    }
    .checkboxall {
      margin-top: 10px;
    }
  }
  .footerdialog {
    display: flex;
    justify-content: flex-end;
  }

}
</style>
